<template>
  <div class="all">
    <!-- 按钮栏组件（添加、删除） skipSign:true //跳过检验-->
    <!-- {{sysCompanyCodeRoles}} -->
    <!-- {{getFindByTypeData}} -->
    <el-button type="primary" plain @click="createdAdd" size="mini" icon="el-icon-plus">新建</el-button>
    <!-- <el-button
      class="allDelete"
      type="danger"
      plain
      @click="toDelete"
      size="mini"
      icon="el-icon-delete"
    >批量删除</el-button> -->
    <!-- <div>{{addData.diaDataAdd[1]}}</div>
    <div>{{addData.diaDataAdd[index]}}</div> -->
    <!-- 弹窗 -->
    <el-dialog title="新增" :visible.sync="addData.dialogVisibleAdd" width="760px" :before-close="handleClose">
      <div class="list" v-for="(item,index) in addData.diaDataAdd" :key="index" v-if="item.addSign">
        <!-- {{addData.diaDataAdd}} -->
        <template v-if="item.addSign">
          <!-- input框 -->
          <div v-if="item.type==='input'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <!-- {{item}} -->
              <!-- <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
                v-if="item.EN==='notes'"
              > -->
              <el-input v-if="item.EN==='notes' || item.EN==='memo'" width='210px' type="textarea" v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" clearable @blur="BurExp($event,item,index)" size="mini"></el-input>
              <el-input v-model="addData.diaDataAdd[index].value" :placeholder="item.indexConValue || '请输入内容'" clearable @blur="BurExp($event,item,index)" size="mini" v-else></el-input>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
            <!-- <span v-if="!item.result" class="font_color"></span> -->
          </div>
          <!-- 计数器 -->
          <div class="lister" :key="index" v-else-if="item.type==='number'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <el-input-number v-model="addData.diaDataAdd[index].value" :min="1" label="描述文字" size="mini"></el-input-number>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
          </div>
          <!-- 时间选择 -->
          <div class="lister" :key="index" v-else-if="item.type=='date'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='date'&&item.addSign">
              <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime"></el-date-picker>
            </span>
          </div>
          <!-- 年月日 -->
          <div class="lister" :key="index" v-else-if="item.type=='datetime'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='datetime'&&item.addSign">
              <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="getSTime"></el-date-picker>
            </span>
          </div>
          <!-- 下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='select'&&item.addSign">

            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <!-- 字典 -->
            <!-- <dictionaries :searchData='diaDataAdd' :modelType='modelType' @optionData="dictionariesCallBack" @optionDataTable="dictionariesTableCallBack"></dictionaries> -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span v-if="item.EN ==='superior'" class="inb">
              <el-cascader v-model="addData.diaDataAdd[index].value" :options="selectOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
            </span>
            <span v-else class="inb">
              <!-- 字典项 typeGroupCode-->
              <el-select v-if="item.typeGroupCode" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
              </el-select>
              <!-- 租户管理员页面  --租户框 -->

              <el-select v-else-if="item.EN == 'sysCompanyCode'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysCompanyCodeChange(addData.diaDataAdd[index].value)" clearable>
                <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
              </el-select>
              <!-- 租户管理员页面  --角色框 -->
              <el-select v-else-if="item.EN == 'groupId'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysRoleChange" clearable>
                <!-- 一个租户只对应一个角色 -->
                <!-- <el-option :label="roleObj.name" :value="roleObj.id"></el-option> -->
                <!-- {{roleArr}} -->
                <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
              </el-select>
              <!-- 字典项 dictTable-->
              <el-select v-else-if="item.dictTable" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>

            </span>
          </div>
          <!-- 站点下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='monitorPointId'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='monitorPointId'&&item.addSign">
              <el-select v-model="addForm.monitorPointId" placeholder="请选择" size="mini" clearable @change="monitorPointChange">
                <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </el-select>
            </span>
          </div>
          <!-- 工艺下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='workmanshipId'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='workmanshipId'&&item.addSign">
              <el-select v-model="addForm.workmanshipId" placeholder="请选择" size="mini" clearable @change="workmanshipChange">
                <el-option v-for="i in workmanshipList" :key="i.id" :label="i.name" :value="i.id"></el-option>
              </el-select>
            </span>
          </div>
          <!-- 设备下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='deviceId'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='deviceId'&&item.addSign">
              <el-select v-model="addForm.deviceId" placeholder="请选择" size="mini" clearable @change="deviceChange">
                <el-option v-for="i in deviceList" :key="i.id" :label="i.deviceName" :value="i.id"></el-option>
              </el-select>
            </span>
          </div>
          <!-- 多选框 -->
          <div class="Checkbox" :key="index" v-else-if="item.type=='Checkbox'&&item.addSign">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='Checkbox'&&item.addSign">
              <el-checkbox v-model="addData.diaDataAdd[index].value"></el-checkbox>
            </span>
          </div>
          <!-- 分区名称 -->
          <div v-if="item.type==='name'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <el-input v-model="addForm.name" placeholder="请输入内容"></el-input>
            </span>
            <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
            <!-- <span v-if="!item.result" class="font_color"></span> -->
          </div>
          <!-- 表格 -->
          <div class="lister" :key="index" v-else-if="item.type=='table'&&item.addSign" style="height:150px;">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}
            </span>
            <div class="inb" v-if="item.type=='table'&&item.addSign" style="margin: 20px 0 0 30px">
              <el-table :data="tableData" style="width: 100%;" height="200" @selection-change="tableSelected">
                <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="60"></el-table-column>
                <el-table-column prop="name" label="参数名称" width="250">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSelectByCodeAndType, //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from '@/api/TenantAdministratorManagement'
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
import {
  searchFlScheduleWorkmanship,
} from '@/api/schedule/base/flwaterMonitorPoint/index' //查询工艺
import {
  seaFlDevice
} from '@/api/schedule/base/flDevice/index'
// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data () {
    return {
      addForm: {
        monitorPointId: "",
        workmanshipId: "",
        deviceId: "",
        name: "",
        param: ""
      },
      monitorPointId: "",
      workmanshipId: "",
      workmanshipList: [],
      deviceList: [],
      disabledBathch: false,
      // 租户管理员  租户-角色数据
      sysCompanyCodeRolesData: this.$parent.sysCompanyCodeRoles,
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined,
      },
      //表格数据
      tableData: [],
      // selectData:[]
      selectOptions: [
        {
          id: 1,
          name: '微山自来水',
          children: [
            {
              id: 2,
              name: '幸福苑小区',
              children: [{ id: 3, name: '1号楼' }],
            },
          ],
        },
        {
          id: 4,
          name: '泗水县',
          children: [
            {
              id: 5,
              name: '花园小区',
              children: [
                { id: 6, name: '1号楼' },
                { id: 7, name: '2号咯' },
                { id: 8, name: '2号咯' },
                { id: 9, name: '2号咯' },
              ],
            },
            {
              id: 10,
              name: '荣盛小区',
            },
          ],
        },
      ],
      superiorData: '',
      // 组件类型
      modelType: 'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      checked: false,
      // 备注  文本域
      textarea: '',
      // 返回的角色对象
      roleArr: [],
    }
  },
  computed: {
    //解决v-for v-if在同一标签警告问题
    // TableDataModel() {
    //   let new_DataModel = JSON.parse(JSON.stringify(this.addData.diaDataAdd));
    //   for (let i = 0; i < new_DataModel.length; i++) {
    //     if (!new_DataModel[i].addSign) {
    //       console.log("-------------计算属性-----------");
    //       new_DataModel.splice(i, 1);
    //     }
    //   }
    //   console.log(new_DataModel)
    //   return new_DataModel;
    // }
  },
  props: [
    //添加传过来的值
    'diaDataAdd',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'sysCompanyCodeRoles',
    'multipleSelection',
  ],
  mounted () {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd))
  },
  methods: {
    //选择站点
    monitorPointChange (v) {
      this.monitorPointId = v
      let obj = {
        monitorPointId: this.monitorPointId
      }
      searchFlScheduleWorkmanship(obj).then(response => {
        this.workmanshipList = response.data
        console.log(this.workmanshipList)
        debugger;
      }).catch();
      seaFlDevice(obj).then(response => {
        this.deviceList = response.data
        console.log(this.deviceList)
        debugger;
      }).catch();
    },
    //选择工艺
    workmanshipChange (v) {
      this.workmanshipId = v;
      let obj = {
        monitorPointId: this.monitorPointId,
        workmanshipId: this.workmanshipId
      }
      seaFlDevice(obj).then(response => {
        this.deviceList = response.data
      }).catch();
    },
    //选择设备
    deviceChange (v) {
      this.handleParam(v)
    },
    handleParam (id) {
      let obj = { deviceId: id }
      assflParam(obj).then(response => {
        this.tableData = response.data
        console.log(this.tableData)
        debugger;
      }).catch(

      );
    },
    //选中配置参数
    tableSelected (val) {
      let arr = []
      for (let selectedItem of val) {
        arr.push(selectedItem.id)
      }
      this.addForm.param = arr.toString()
    },
    // 角色
    sysRoleChange (newvalue) {

      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr

      var id = ''
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index]
        id = roleArrs[index].id
      }
      this.$emit('sysRoleId', id)
      console.log(id)
    },
    // getFindByTypeData(){
    //   this.getFindByType()
    // },
    //
    // 租户管理员页面  如果改变触发
    async sysCompanyCodeChange (value) {
      console.log(value, 'duime')
      // console.log(this.$parent.getSelectByCodeAndTypeData(value));
      const res = await getSelectByCodeAndType(value)
      console.log(
        res,
        '子组件用于添加租户管理员时选择租户后之间传回选择租户的角色'
      )
      const roleObjs = res.data
      if (roleObjs) {
        console.log(roleObjs)

        this.roleArr = roleObjs
        // console.log([roleObjs],999999999);
        // console.log(this.roleArr,8888888888888);
      } else {
        console.log('该租户没有对应的角色')
      }

      // console.log(22222222222222222);

      // this.$parent.getSelectByCodeAndTypeData(value)
      // console.log(sysCompanyCodeRoles);

      // console.log(this.sysCompanyCodeRolesData,'99999',res,'sssssss');
    },
    //   获取父级select的数据
    // getSelectData(){
    //     console.log(this.$parent,'ceshikk');

    // },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.addData.dialogVisibleAdd = false
          done()
        })
        .catch((_) => { })
    },
    //搜索框内容传递给父元素
    createdAdd () {
      this.addData.dialogVisibleAdd = true
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = ''
        this.addData.diaDataAdd[i].result = true
      }
    },
    //添加-传给父组件，ajax
    toAdd () {
      this.$emit('toAdd', this.addForm)
      this.addData.dialogVisibleAdd = false
      this.addForm = {
        monitorPointId: "",
        workmanshipId: "",
        deviceId: "",
        name: "",
        param: ""
      }
      this.tableData = ""
    },

    //删除-传给父组件，ajax
    toDelete () {
      this.$emit('toDelete', '点击了删除')
    },

    getSTime (val) {
      this.addData.diaDataAdd.createTime = val
      // console.log(val)
    },
    //正则表达式
    BurExp (e, item, index) {
      if (this.addData.diaDataAdd[index].skipSign && e.target.value === '') {
        item.result = true
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value)
        item.result = boolean
        this.addData.diaDataAdd[index].result = boolean
        console.log(item.result, 999)
      }
      // console.log(item, index);
      // console.log( this.addData.diaDataAdd,this.TableDataModel)

      // ----
      // let boolean = new RegExp(item.Exp).test(e.target.value);
      // this.addData.diaDataAdd[index].result = boolean;
      // ----
      // this.TableDataModel[index].result= boolean;
      // let newAobj=this.TableDataModel[index]
      // console.log(boolean);
      // console.log(this.TableDataModel[index]);
    },
    // 新增   租户特殊请求
    getSelectByCodeAndTypeDatas () {
      console.log(this.$parent.getSelectByCodeAndTypeData, 'zhegeshishsi')
    },
  },
  created () {
    // this.getSelectData()
    this.getSelectByCodeAndTypeDatas()
  },
  watch: {
    optionsZi (newVal) {
      this.searchOption = newVal
    },
    searchOptionTable (newVal) {
      this.searchOptions = newVal
    },
    multipleSelection (newVal) {
      console.log(newVal, 3589)
      if ((newVal, length == 0)) {
        this.disabledBathch = false
      } else {
        this.disabledBathch = true
      }
      console.log(newVal, this.disabledBathch, 3589)
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.all {
  .is-plain {
    // width: 84px;
    // height: 34px;
    // /deep/.el-icon-plus{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  .allDelete {
    // width: 110px;
    // /deep/.el-icon-delete{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  display: inline-block;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    .lister {
      height: 44px;
      width: 370px;
      .fon {
        text-align: right;
        margin-right: 14px;
        width: 99px;
      }
      .inb {
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
    .font_color {
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
}
</style>
